<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <!-- 安装 router -->
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
    
        .router-link-active,.demo{
            color: red;
            font-size: 30px
        }
        
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(100px)
        }

        /* .v-enter-active 入场动画的时间段  */
        /* .v-leave-active 离开场动画的时间段 */
        .v-enter-active,
        .v-leave-active {
            transition: all 0.5s ease;
        }

    </style>
</head>

<body>
    <div id="app">
        <!-- vue-router提供的标签 专门用来 当做占位符用的 以后 路由规则匹配到的规则就会展示到router-view里面去 所以可以认为是一个占位符 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">zhuce</router-link>
        <transition mode="out-in">
        <router-view></router-view>                
            </transition>
        <!-- 使用的时候要加#号 -->
        <!-- <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->

        <!--router-link 默认渲染为a标签  -->
     
            
    </div>
    <script>
        var login = {
            template: '<h1>登录</h1>'
        }


        var register = {
            template: '<h1>注册</h1>'
        }
        // 创建路由对象 当导入router的时候 在window的全局对象里 就有了一个路由的构造函数 叫做Vuerouter
        var routerObj = new VueRouter({
            //这个配置对象中的 route 表示路由匹配规则的意思
            routes: [
                //  每个路由规则都是一个对象 这个规则对象 有两个必须的属性 第一个属性是path 表示监听 那个路由链接地址 第二个是 component 表示如果路由是前面匹配到的path 则展示 component 对象的那个组件
                // component 的属性值 必须是组件的模板对象 不能是引用名称
                {
                    path: '/',
                    redirect: '/login'
                },
                {
                    path: '/login',
                    component: login
                },
                {
                    path: '/register',
                    component: register
                }

            ],
            // 修改点击更改的class
            linkActiveClass: 'demo'
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            router: routerObj //将路由规则对象 注册到vm实例中 用来监听url地址变化 然后展示对应是数据

        })
    </script>
</body>

</html>